<template>
	<div style="width:100%;height:100%;">
		区域选择：
		<Select v-model="queryData.selectArea" style="width:100px">
			<Option v-for="item in areaData" :value="item.id" :key="item.id">{{ item.name }}</Option>
		</Select>
		选择时间：
		<DatePicker v-model="queryData.date" type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="请选择时间段" style="width: 300px"></DatePicker>
		<Button type="primary" icon="ios-search" @click="getData">Search</Button>
		<div id="service-temp-con" style="width:100%;height:90%;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';


	export default {
		name: 'line-add',
		data() {
			return {
				// 页面查询数据
				data: [],
				areaData: [],
				queryData: {
					selectArea: 0,
					date: [],
				},
				myChart: null,
				option: {

				}
			}
		},
		mounted() {
			// setTimeout(()=>{
			// 	this.hadleGetFilesListApi();
			// })
			// this.hadleGetFilesListApi();
			this.initData();
			this.initEcharts();
		},
		updated() {
			// this.hadleGetFilesListApi();
			this.drawEcharts();
		},
		created: function() {
			//都是异步执行，赋值顺序注意

		},
		methods: {

			getData() {
				const that = this;
				QingYunApi.getGhouseAir(that.queryData)
					.then(res => {
						that.data = res.data;
						that.hadleGetFilesListApi();

					})
			},
			getAreaData() {
				const that = this;
				IotAreaApi.getAll()
					.then(res => {
						that.areaData = res.data;
						that.queryData.selectArea = that.areaData[0].id;
						that.getData();
					})
				that.getData();
			},
			initData(){//去请求初始化数据
				this.option = {
					title: {
						text: '堆叠区域图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '视频广告',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: '直接访问',
							type: 'line',
							stack: '总量',
							areaStyle: {
								normal: {}
							},
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							label: {
								normal: {
									show: true,
									position: 'top'
								}
							},
							areaStyle: {
								normal: {}
							},
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				};
			},
			initEcharts(){//初始化dom
				// let dom = this.$refs.myChart;
				// this.chart=echarts.init(dom);
				this.myChart = this.$echarts.init(document.getElementById('service-temp-con'));
				
			},
			drawEcharts(){//绘制echarts
				this.myChart.setOption(this.option);
				this.myChart.resize();
			},
			// hadleGetFilesListApi() {
			// 	const option = {
			// 		title: {
			// 			text: '堆叠区域图'
			// 		},
			// 		tooltip: {
			// 			trigger: 'axis',
			// 			axisPointer: {
			// 				type: 'cross',
			// 				label: {
			// 					backgroundColor: '#6a7985'
			// 				}
			// 			}
			// 		},
			// 		legend: {
			// 			data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
			// 		},
			// 		toolbox: {
			// 			feature: {
			// 				saveAsImage: {}
			// 			}
			// 		},
			// 		grid: {
			// 			left: '3%',
			// 			right: '4%',
			// 			bottom: '3%',
			// 			containLabel: true
			// 		},
			// 		xAxis: [{
			// 			type: 'category',
			// 			boundaryGap: false,
			// 			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			// 		}],
			// 		yAxis: [{
			// 			type: 'value'
			// 		}],
			// 		series: [{
			// 				name: '邮件营销',
			// 				type: 'line',
			// 				stack: '总量',
			// 				areaStyle: {},
			// 				data: [120, 132, 101, 134, 90, 230, 210]
			// 			},
			// 			{
			// 				name: '联盟广告',
			// 				type: 'line',
			// 				stack: '总量',
			// 				areaStyle: {},
			// 				data: [220, 182, 191, 234, 290, 330, 310]
			// 			},
			// 			{
			// 				name: '视频广告',
			// 				type: 'line',
			// 				stack: '总量',
			// 				areaStyle: {},
			// 				data: [150, 232, 201, 154, 190, 330, 410]
			// 			},
			// 			{
			// 				name: '直接访问',
			// 				type: 'line',
			// 				stack: '总量',
			// 				areaStyle: {
			// 					normal: {}
			// 				},
			// 				data: [320, 332, 301, 334, 390, 330, 320]
			// 			},
			// 			{
			// 				name: '搜索引擎',
			// 				type: 'line',
			// 				stack: '总量',
			// 				label: {
			// 					normal: {
			// 						show: true,
			// 						position: 'top'
			// 					}
			// 				},
			// 				areaStyle: {
			// 					normal: {}
			// 				},
			// 				data: [820, 932, 901, 934, 1290, 1330, 1320]
			// 			}
			// 		]
			// 	};
			// 	let myChart = this.$echarts.init(document.getElementById('service-temp-con'));
			// 	myChart.setOption(option);
			// 	myChart.resize();
			// 	window.onresize = function() {
			// 		myChart.resize();
			// 	};
			// 	// window.addEventListener('resize', function () {
			// 	//     myChart.resize();
			// 	// });
			// }
		}
	};
</script>
